<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发布签到 - 志愿服务管理系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #2196F3;
      --primary-dark: #1976D2;
      --primary-light: #BBDEFB;
      --success-color: #4CAF50;
      --warning-color: #FFC107;
      --danger-color: #F44336;
      --text-primary: #212121;
      --text-secondary: #757575;
      --background-light: #F5F5F5;
      --background-white: #FFFFFF;
      --border-color: #E0E0E0;
    }

    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
      min-height: 100vh;
      margin: 0;
      padding: 2rem;
    }

    .container {
      max-width: 800px;
      margin: auto;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      padding: 2rem;
    }

    .page-title {
      color: var(--primary-dark);
      text-align: center;
      margin-bottom: 2rem;
      font-size: 2rem;
      font-weight: 600;
      position: relative;
      padding-bottom: 1rem;
    }

    .page-title:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 3px;
      background: var(--primary-color);
      border-radius: 2px;
    }

    .form-group {
      margin-bottom: 1.5rem;
      position: relative;
    }

    .form-label {
      color: var(--text-secondary);
      font-weight: 500;
      margin-bottom: 0.5rem;
      display: block;
    }

    .form-control {
      border: 2px solid var(--border-color);
      border-radius: 8px;
      padding: 0.75rem;
      transition: all 0.3s ease;
      background: var(--background-white);
    }

    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px var(--primary-light);
      outline: none;
    }

    .form-control[readonly] {
      background-color: var(--background-light);
      cursor: not-allowed;
    }

    .form-select {
      border: 2px solid var(--border-color);
      border-radius: 8px;
      padding: 0.75rem;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23212121' viewBox='0 0 16 16'%3E%3Cpath d='M8 10.5l-4-4h8l-4 4z'/%3E%3C/svg%3E");
    }

    .form-select:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px var(--primary-light);
    }

    textarea.form-control {
      min-height: 120px;
      resize: vertical;
    }

    .btn-submit {
      background: var(--primary-color);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 1rem;
      font-size: 1.1rem;
      font-weight: 500;
      width: 100%;
      transition: all 0.3s ease;
      margin-top: 1rem;
    }

    .btn-submit:hover {
      background: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
    }

    .btn-submit:active {
      transform: translateY(0);
    }

    .info-text {
      color: var(--text-secondary);
      font-size: 0.9rem;
      margin-top: 0.5rem;
    }

    .icon-input {
      position: relative;
    }

    .icon-input i {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
    }

    .icon-input .form-control {
      padding-left: 2.5rem;
    }

    @media (max-width: 768px) {
      body {
        padding: 1rem;
      }

      .container {
        padding: 1.5rem;
      }

      .page-title {
        font-size: 1.75rem;
      }
    }

    .location-info {
      background: var(--background-light);
      border-radius: 8px;
      padding: 1rem;
      margin-bottom: 1.5rem;
    }

    .location-info p {
      margin: 0;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .location-info i {
      color: var(--primary-color);
    }
  </style>
</head>
<body>
<div class="container">
  <h1 class="page-title">
    <i class="fas fa-clipboard-check me-2"></i>
    发布签到
  </h1>

  <form id="signUpForm" th:action="@{/toAddSign}" method="post">
    <input type="hidden" id="latitude" name="latitude" th:value="${activity.getLat()}">
    <input type="hidden" id="longitude" name="longitude" th:value="${activity.getLng()}">
    <input type="hidden" id="address" name="address" th:value="${activity.getActivityAddress()}">

    <div class="location-info">
      <p><i class="fas fa-map-marker-alt"></i>签到地点：<span th:text="${activity.getActivityAddress()}"></span></p>
    </div>

    <div class="form-group">
      <label class="form-label" for="activityId">活动编号</label>
      <div class="icon-input">
        <i class="fas fa-hashtag"></i>
        <input type="text" class="form-control" th:value="${activity.getId()}" id="activityId" name="activityId" readonly>
      </div>
    </div>

    <div class="form-group">
      <label class="form-label" for="activityName">活动名称</label>
      <div class="icon-input">
        <i class="fas fa-flag"></i>
        <input type="text" class="form-control" th:value="${activity.getActivityName()}" id="activityName" name="activityName" readonly>
      </div>
    </div>

    <div class="form-group">
      <label class="form-label" for="startTime">开始时间</label>
      <div class="icon-input">
        <i class="fas fa-clock"></i>
        <input type="datetime-local" class="form-control" id="startTime" name="startTime" required readonly>
      </div>
      <small class="info-text">签到开始时间将自动设置为当前时间</small>
    </div>

    <div class="form-group">
      <label class="form-label" for="sustainTime">持续时间</label>
      <div class="icon-input">
        <i class="fas fa-hourglass-half"></i>
        <select class="form-select" id="sustainTime" name="sustainTime" required>
          <option value="5">&nbsp;&nbsp;&nbsp;&nbsp;5分钟</option>
          <option value="10">&nbsp;&nbsp;&nbsp;&nbsp;10分钟</option>
          <option value="15">&nbsp;&nbsp;&nbsp;&nbsp;15分钟</option>
        </select>
      </div>
      <small class="info-text">请选择签到的有效时间</small>
    </div>

    <div class="form-group">
      <label class="form-label" for="message">签到说明</label>
      <textarea class="form-control" id="message" name="message" required
                placeholder="请输入签到相关说明信息..."></textarea>
      <small class="info-text">可以添加签到要求、注意事项等信息</small>
    </div>

    <button type="submit" class="btn-submit">
      <i class="fas fa-paper-plane me-2"></i>
      发布签到
    </button>
  </form>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // 设置开始时间为当前时间
    function updateCurrentTime() {
      var now = new Date();
      var year = now.getFullYear();
      var month = String(now.getMonth() + 1).padStart(2, '0');
      var day = String(now.getDate()).padStart(2, '0');
      var hours = String(now.getHours()).padStart(2, '0');
      var minutes = String(now.getMinutes()).padStart(2, '0');

      var formattedDate = `${year}-${month}-${day}T${hours}:${minutes}`;
      document.getElementById('startTime').value = formattedDate;
    }

    // 初始设置时间
    updateCurrentTime();

    // 每分钟更新一次时间
    setInterval(updateCurrentTime, 60000);

    // 表单提交前验证
    document.getElementById('signUpForm').addEventListener('submit', function(e) {
      var message = document.getElementById('message').value.trim();
      if (!message) {
        e.preventDefault();
        alert('请输入签到说明信息');
        return false;
      }

      if (!confirm('确认要发布签到吗？')) {
        e.preventDefault();
        return false;
      }
    });
  });
</script>
</body>
</html>